<template>
  <div class="container">
    <div class="top-bar">
      <div class="orderstatus">
        <div class="top">
          <!-- 支付超时 -->
          <img v-if="base_url&&orderData.order_status==8"
               :src="base_url+'/mp_3.1.6/serviceorder/overtime.png'"
               alt />
          <!-- 订单已失效 -->
          <img v-if="base_url&&(orderData.order_status==11||orderData.order_status==5)"
               :src="base_url+'/mp_3.1.6/serviceorder/invalid.png'"
               alt />
          <!-- 已评价 -->
          <img v-if="base_url&&orderData.order_status==6"
               :src="base_url+'/mp_3.1.6/serviceorder/evaluation.png'"
               alt />
          <!-- 已退款 -->
          <img v-if="base_url&&orderData.order_status==7"
               :src="base_url+'/mp_3.1.6/serviceorder/refunded.png'"
               alt />
          <!-- 待付款 -->
          <img v-if="base_url&&orderData.order_status==1"
               :src="base_url+'/mp_3.1.6/serviceorder/time.png'"
               alt />
          <!-- 待消费 -->
          <img v-if="base_url&&orderData.order_status==2"
               :src="base_url+'/mp_3.1.6/serviceorder/time.png'"
               alt />
          <!-- 待评价 -->
          <img v-if="base_url&&orderData.order_status==4"
               :src="base_url+'/mp_3.1.6/serviceorder/time.png'"
               alt />
          <!-- 预约中 -->
          <img v-if="base_url&&orderData.order_status==3"
               :src="base_url+'/mp_3.1.6/serviceorder/time.png'"
               alt />
          <span>{{orderData.order_status_name}}</span>
        </div>
        <div class="bottom"
             v-if="orderData.order_status==1">剩余支付时间：{{end_time}}</div>
      </div>
    </div>
    <div class="wrapbox">
      <!-- 项目/服务 -->
      <div class="main"
           @tap="to_detail()">
        <div class="logo">
          <img v-if="img_url"
               :src="img_url+orderData.project_image"
               alt
               class="img" />
        </div>
        <div class="info">
          <div class="title">{{orderData.project_name}}</div>
          <div class="hos-name">
            <div class="name">{{orderData.hospital_name}}</div>
            <div class="distance"
                 @tap.stop="watch_map()">{{orderData.juli?orderData.juli:0}}km</div>
          </div>
          <!-- <div class="plus" v-if="orderData.plus_title&&orderData.plus_title!=''">
            {{orderData.plus_title}}
          </div> -->
          <div class="price">
            <span class="yang">¥</span>
            <span class="count">{{orderData.project_price}}</span>
            <span class="bitbox"
                  v-if="orderData.deduction_method==1">
              <img class="icon"
                   v-if="base_url"
                   :src="base_url+'/mp_3.1.6/goldcoin/gold.png'"
                   alt="">
              <span class="mrt"
                    v-if="orderData.deduction_credit==orderData.project_price">全金币抵扣</span>
              <span class="mrt"
                    v-else>金币可抵{{orderData.deduction_credit}}元</span>
            </span>
            <span class="bitbox textcolor"
                  v-if="orderData.deduction_method==2">
              <img class="icon"
                   v-if="base_url"
                   :src="base_url+'/mp_3.1.6/goldcoin/silver.png'"
                   alt="">
              <span v-if="orderData.deduction_credit==orderData.project_price">全银币抵扣</span>
              <span v-else>银币可抵{{orderData.deduction_credit}}元</span>
            </span>
          </div>
        </div>
      </div>
      <!-- 核销码 -->
      <div class="writecode"
           v-if="orderData.code&&type==2">
        <div class="codenum">核销码：{{orderData.code}}</div>
        <div class="codepic">
          <img v-if="orderData.qr_code_url"
               :src="orderData.qr_code_url"
               alt="">
        </div>
      </div>
      <!-- 详情 -->
      <div class="order-detail">
        <div class="orderterm">
          <div class="lf">订单编号</div>
          <div class="rt">
            {{orderData.order_sn}}
            <span class="copybtn"
                  @tap.stop="copy_order(orderData.order_sn)">复制</span>
          </div>
        </div>
        <div class="orderterm"
             v-if="type==2">
          <div class="lf">下单时间</div>
          <div class="rt">{{orderData.created_at}}</div>
        </div>
        <div class="orderterm"
             v-if="type!=2&&(orderData.order_status!=1&&orderData.order_status!=8)">
          <div class="lf">付款时间</div>
          <div class="rt">{{orderData.pay_time}}</div>
        </div>
        <div class="orderterm"
             v-if="type!=2&&(orderData.order_status==1||orderData.order_status==8)">
          <div class="lf">提交时间</div>
          <div class="rt">{{orderData.created_at}}</div>
        </div>
        <div class="orderterm"
             v-if="type!=2&&(orderData.order_status!=1&&orderData.order_status!=8)">
          <div class="lf">有效期至</div>
          <div class="rt">{{orderData.expired_time}}</div>
        </div>
        <div class="orderterm"
             v-if="type==2">
          <div class="lf">购买数量</div>
          <div class="rt">1</div>
        </div>
        <div class="orderterm"
             v-if="type==2">
          <div class="lf">购买手机号</div>
          <div class="rt">{{orderData.user_phone}}</div>
        </div>
        <div class="orderterm"
             v-if="type!=2">
          <div class="lf">推荐人手机号</div>
          <div class="rt">{{orderData.phone}}</div>
        </div>
        <div class="orderterm"
             v-if="type==2&&(orderData.order_status==2||orderData.order_status==4)">
          <div class="lf">支付流水号</div>
          <div class="rt">{{orderData.out_trade_no}}</div>
        </div>
        <div class="orderterm"
             v-if="type==2&&(orderData.order_status==2&&orderData.order_status==4)">
          <div class="lf">订单付款时间</div>
          <div class="rt">{{orderData.pay_time}}</div>
        </div>
        <div class="orderterm"
             v-if="type==2&&(orderData.order_status==2||orderData.order_status==4)">
          <div class="lf">支付方式</div>
          <div class="rt">{{orderData.payment}}</div>
        </div>
      </div>
      <div class="order-detail">
        <div class="orderterm item">
          <div class="lf">项目价格</div>
          <div class="rt">￥{{orderData.project_price}}</div>
        </div>
        <div class="orderterm item"
             v-if="orderData.member_discount&&orderData.member_discount>0">
          <div class="lf">PLUS会员优惠</div>
          <div class="rt">￥{{orderData.member_discount}}</div>
        </div>
        <div class="orderterm item"
             v-if="orderData.deduction_method!=0&&orderData.deduction_integral>0">
          <div class="lf">{{orderData.deduction_method==1?'金币抵扣':'银币抵扣'}}</div>
          <div class="rt">
            {{orderData.deduction_integral}}
            <img class="icon"
                 v-if="base_url&&orderData.deduction_method==1"
                 :src="base_url+'/mp_3.1.6/goldcoin/gold.png'"
                 alt="">
            <img class="icon"
                 v-if="base_url&&orderData.deduction_method==2"
                 :src="base_url+'/mp_3.1.6/goldcoin/silver.png'"
                 alt="">
          </div>
        </div>
        <div class="orderterm item"
             v-if="orderData.deduction>0">
          <div class="lf">优惠券抵扣</div>
          <div class="rt">￥{{orderData.deduction}}</div>
        </div>
        <div class="actualpay">
          <span class="text"
                v-if="orderData.order_status==1||orderData.order_status==8">需付款:</span>
          <span class="text"
                v-else>实付款:</span>
          <span class="yang">¥</span>
          <span class="realprice">{{orderData.order_amount}}</span>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div v-if="(orderData.order_status==7&&orderData.project_order_id<=0)||(orderData.order_status==8&&type!=2)||(orderData.order_status==2&&type==2)"></div>
    <div v-else-if="orderData.order_status"
         class="footer"
         :class="isIphoneX&&'isIphoneX'">
      <div class="gray"
           v-if="orderData.order_status==11||orderData.order_status==5||(orderData.order_status==2&&type!=2)||orderData.order_status==3">
        <button @tap="to_service()"
                class="contact-btn"></button>
        申请退款
      </div>
      <div class="gray"
           v-if="(orderData.order_status==5||orderData.order_status==6||orderData.order_status==7||orderData.order_status==3||(type!=2&&orderData.order_status==4))&&orderData.project_order_id>0"
           @tap.stop="booking_detail()">
        查看预约单
      </div>
      <div class="red"
           v-if="type==2&&orderData.order_status==4"
           @tap.stop="re_buy()">
        再次购买
      </div>
      <div class="rednull"
           v-if="type!=2&&orderData.order_status==4"
           @tap.stop="evaluat()">
        去评价
      </div>
      <div class="red"
           v-if="type!=2&&orderData.order_status==2">
        <picker mode="date"
                @change="booking_order"
                :value="booking_time"
                :start="booking_start"
                :end="end_time">去预约</picker>
      </div>
      <div class="red"
           v-if="orderData.order_status==1"
           @tap.stop="pay_order()">去付款</div>
      <div class="red"
           v-if="type==2&&orderData.order_status==8"
           @tap.stop="re_buy()">重新购买</div>
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
import pay from "@/assets/js/pay1.js";

export default {
  data () {
    return {
      img_url: common.image_response,
      base_url: common.image_resource,
      isIphoneX: false,
      type: '',//1全款订单,2服务
      order_id: 0,
      orderData: {},
      latitude: 0,
      longitude: 0,
      end_time: 0,
      booking_time: "",
      booking_start: new Date(new Date().getTime()).Format("yyyy-MM-dd"),
      booking_end: ""
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "订单详情"
    });
    Object.assign(this.$data, this.$options.data());
    if (options.order_id) {
      this.order_id = options.order_id;
      this.type = options.type
      console.log(this.type)
    }
    //获取系统信息
    let that = this;
    wx.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth;
        if (res.model.search("iPhone X") != -1) {
          that.isIphoneX = true;
        }
      }
    });
  },
  onShow () {
    this.get_location();
  },
  methods: {
    //  复制订单号
    copy_order (data_str) {
      wx.setClipboardData({
        data: data_str, //需要设置的内容,
        success: res => {
          wx.showToast({
            title: "复制成功", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    // 获取订单详情
    get_detail () {
      common.fly_post(
        "api/v4_5/life/show",
        {
          id: this.order_id,
          latitude: this.latitude,
          longitude: this.longitude,
          user_id: wx.getStorageSync("user_id") || 0
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            if (res.data.order_status == 1) {
              let now_time = new Date().getTime();
              let end_time = res.data.pay_end_time * 1000 - now_time
              if (end_time > 0) {
                this.end_time = this.toHHmmss(end_time);
              } else {
                this.end_time = '00:00:00';
              }
            } else if (res.data.order_status == 2) {
              this.end_time = new Date(res.data.last_time * 1000).Format(
                "yyyy-MM-dd"
              );
            }
            this.orderData = res.data;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 时间戳转时分秒
    toHHmmss: function (data) {
      var s;
      var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = parseInt((data % (1000 * 60)) / 1000);
      s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
      return s;
    },
    // 跳转客服
    to_service () {
      common.to_service()
    },
    // 获取定位
    get_location () {
      let that = this;
      wx.getLocation({
        type: "gcj02", //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          that.latitude = res.latitude;
          that.longitude = res.longitude;
          that.get_detail();
        },
        fail: () => {
          wx.showToast({
            title: "无法获取地理位置", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    // 查看地图
    watch_map () {
      wx.navigateTo({
        url: `/pages/package_projects/map/main?hosLat=${
          this.orderData.lat
          }&hosLng=${this.orderData.lng}&hosName=${
          this.orderData.hospital_name
          }`
      });
    },
    // 跳转项目详情
    to_detail () {
      wx.navigateTo({
        url: `/pages/package_projects/project_detail/main?id=${
          this.orderData.project_id
          }`
      });
    },
    // 立即支付
    pay_order () {
      let that = this;
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      wx.getStorage({
        key: "open_id",
        success: res => {
          const open_id = res.data;
          common.fly_post(
            "api/v4_5/payment/wechatpay_miniapp_submit",
            {
              //预支付
              openid: open_id,
              body: that.orderData.project_name,
              order_sn: that.orderData.order_sn,
              total: that.orderData.order_amount,
              submit_type: "project_full_order"
            },
            msg => {
              wx.hideLoading();
              let res = msg.data;
              if (res.status_code == 0) {
                wx.requestPayment({
                  timeStamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.package,
                  signType: "MD5",
                  paySign: res.data.paySign,
                  success: function (res) {
                    that.get_detail();
                  },
                  fail: function (res) {
                    wx.showToast({
                      title: "支付未成功", //提示的内容,
                      icon: "none", //图标,
                      duration: 1500, //延迟时间,
                      mask: true, //显示透明蒙层，防止触摸穿透,
                      success: res => { }
                    });
                  }
                });
              } else {
                wx.hideLoading();
                wx.showToast({
                  title: res.message,
                  icon: "none",
                  duration: 2000,
                  mask: true
                });
                return false;
              }
            }
          );
        },
        fail: () => {
          wx.showToast({
            title: "请先登录", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    // 立即预约
    booking_order (e) {
      let that = this;
      const booking_date = e.mp.detail.value;
      wx.showLoading({
        title: "提交中", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "/api/v4_5/project/order/reservation",
        {
          order_id: this.orderData.id,
          appointment_time: booking_date
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            wx.showToast({
              title: "预约成功", //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: re => {
                setTimeout(() => {
                  wx.navigateTo({
                    url: `/pages/package_projects/yy_order_detail/main?booking_id=${
                      res.data.id
                      }`
                  });
                }, 1500);
              }
            });
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 查看预约详情
    booking_detail () {
      wx.navigateTo({
        url: `/pages/package_projects/yy_order_detail/main?booking_id=${
          this.orderData.project_order_id
          }`
      });
    },
    // 评价
    evaluat () {
      wx.navigateTo({
        url:
          "/pages/package_mine/project_evaluation/main?id=" + this.orderData.id
      });
    },
    // 再次购买
    re_buy () {
      let router = `serviceDetail?serviceId=${this.orderData.project_id}&shopId=${this.orderData.hospital_id}`
      wx.navigateTo({ url: '/pages/life_beauty/main?router=' + encodeURIComponent(router) });
    },
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(243, 244, 246, 1);
  position: relative;
  .top-bar {
    width: 100%;
    height: 138px;
    background: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.1.6/serviceorder/header.png)
      no-repeat;
    background-size: cover;
    z-index: -1;
    .orderstatus {
      width: 100%;
      height: 94px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .top {
        img {
          width: 16px;
          height: 16px;
          margin-right: 3px;
          vertical-align: -2px;
        }
        span {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
        }
      }
      .bottom {
        margin-top: 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
      }
    }
  }
  .wrapbox {
    width: 100%;
    position: absolute;
    top: 94px;
    padding-bottom: 93px;
    .main {
      margin: 0 10px 10px;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      background: #ffffff;
      border-radius: 5px;
      .logo {
        width: 114px;
        height: 114px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        flex: 1;
        padding-left: 10px;
        position: relative;
        .title {
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .hos-name {
          margin-top: 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 16px;
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            flex: 1;
          }
        }
        .plus {
          padding: 0 5px;
          margin: 4px 0;
          line-height: 16px;
          font-size: 10px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          display: inline-block;
        }
        .price {
          position: absolute;
          bottom: 0;
          .yang {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 16px;
          }
          .count {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 56, 62, 1);
            line-height: 20px;
          }
          .bitbox {
            margin-left: 8px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(245, 208, 64, 1);
            line-height: 14px;
            position: relative;
            top: -2px;
            .icon {
              width: 12px;
              height: 12px;
              vertical-align: -2px;
            }
            span {
              position: relative;
              top: -1px;
              &.mrt {
                margin-left: 1px;
              }
            }
          }
          .textcolor {
            color: #a5b3b9;
          }
        }
      }
    }
    .writecode {
      margin: 0 10px 10px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      box-sizing: border-box;
      .codenum {
        background: rgba(255, 238, 244, 1);
        padding: 10px 8px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 85, 143, 1);
        box-sizing: border-box;
      }
      .codepic {
        padding: 16px 0;
        text-align: center;
        box-sizing: border-box;
        img {
          width: 127px;
          height: 127px;
        }
      }
    }
    .order-detail {
      margin: 0 10px 10px;
      background: #ffffff;
      padding: 0 10px 12px;
      border-radius: 5px;
      box-sizing: border-box;
      .orderterm {
        padding-top: 12px;
        display: flex;
        .lf {
          flex: 3;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 16px;
        }
        .rt {
          flex: 7;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 16px;
          .copybtn {
            margin-left: 8px;
            width: 28px;
            height: 14px;
            background: #eaeaea;
            border-radius: 7px;
            text-align: center;
            padding: 0 4px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 14px;
            box-sizing: border-box;
          }
        }
      }
      .item {
        .rt {
          text-align: right;
          .icon {
            width: 12px;
            height: 12px;
            vertical-align: -2px;
            margin-left: -2px;
          }
        }
      }
      .actualpay {
        text-align: right;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
        margin-top: 24px;
        .text {
          margin-right: 4px;
        }
        .yang {
          color: #ff383e;
        }
        .realprice {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          line-height: 20px;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.07);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding: 5px 10px;
    box-sizing: border-box;
    div {
      float: right;
      width: 106px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      border-radius: 20px;
      margin-left: 16px;
    }
    .gray {
      border: 1px solid rgba(210, 210, 210, 1);
      color: #999999;
      position: relative;
      .contact-btn {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        opacity: 0;
      }
    }
    .red {
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      color: #ffffff;
    }
    .rednull {
      border: 1px solid rgba(255, 115, 164, 1);
      color: #3EB0A9;
    }
  }
  .isIphoneX {
    height: 83px;
  }
}
</style>


